<template>
    <div class="transitem" @click="totransdetail">
        <div class="toptitle flexbox">
            <div class="flex_item sort">
                <p class="circle">{{numindex+1}}</p>
            </div>
            <div class="flex5 od_num">
                时间: {{transitem.dateofPlan}}
            </div>
            <div class="flex3 od_status">
                状态: <span :class="transitem.state=='等待安排'?'green':'red'">{{transitem.state}}</span>
            </div>
        </div>
        <div class="iteminfo">
            <div class="infowrap flexbox">
                <div class="flex_item infotitle">
                    单号:
                </div>
                <div class="flex4 infovalue">
                    <span>{{transitem.so}} / {{transitem.eir_shippercode}} / {{transitem.size}}</span>
                </div>
            </div>
            <div class="infowrap flexbox">
                <div class="flex_item infotitle">
                    地址:
                </div>
                <div class="flex4 infovalue">
                    <span>{{transitem.placeofloadarea||'暂无'}} - {{transitem.placeofload||'暂无'}}</span>
                </div>
            </div>
            <div class="infowrap flexbox">
                <div class="flex_item infotitle">
                    车牌:
                </div>
                <div class="flex4 infovalue">
                    <span>{{transitem.truck||'暂无'}} / {{transitem.name||'暂无'}} / {{transitem.mobile||'暂无'}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "transitem1",
    components: {
        
    },
    props:['transitem','numindex'],
    data() {
        return {
            
        }
    },
    methods:{
        totransdetail:function(){
            this.$router.push({
                path:'/transdetail',
                query:{
                    t_ctnrId:this.transitem.t_ctnrId
                }
            })
        }
    },
    mounted:function(){
        
    }
};
</script>

<style lang="less" scoped>
.transitem{
    width: 94%;
    margin-left: 3%;
    height:auto;
    margin-top: .1rem;
    background-color: #fff;
    border-radius: .2rem;
    box-shadow: 0px 0px 3px #ddd;
    position: relative;
    .toptitle{
        padding: .2rem 10px;
        border-bottom: 1px solid #eee;
        .od_num{
            font-size: .34rem;
            color: #333;
            line-height: .6rem;
            text-align: left;
        }
        .sort{
            text-align: center;
            font-size: 0px;
            line-height: 1.4;
            .circle{
                display: inline-block;
                width: .56rem;
                height: .56rem;
                border: 1px solid #f0464e;
                color: #f0464e;
                border-radius: 50%;
                text-align: center;
                line-height: .56rem;
                font-size: .32rem;
            }
        }
        .od_status{
            font-size: .34rem;
            line-height: .6rem;
            text-align: right;
            color: #666;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            .green{
                color: #1AA034;
            }
            .red{
                color: red;
            }
        }
    }
    .iteminfo{
        width: 94%;
        margin-left: 3%;
        height: auto;
        overflow: hidden;
        padding-bottom: .2rem;
        padding-top: .2rem;
        .infowrap{
            width: 100%;
            text-align: left;
            height: .6rem;
            font-size: 0px;
            opacity: hidden;
            margin-bottom: .2rem;
            .infotitle{
                font-size: .34rem;
                color: #666;
                line-height: .6rem;
                text-indent: .2rem;
            }
            .infovalue{
                text-align: right;
                line-height: .6rem;
                width: 100%;
                span{
                    color: #999;
                    font-size: .34rem;
                    margin-right: .2rem;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    display: inline-block;
                    vertical-align: middle;
                    max-width: 100%;
                }
                .red{
                    color: #FF464E;
                }
                .green{
                    color: #2AB577;
                }
            }
        }
    }
}
</style>
